<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <jsp:include page="../header.jsp"></jsp:include>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">客户信息</h1>
</header>
<div class="mui-content">
    <div id="customer-info" class="mui-control-content mui-active">
        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="color:#333"
            id="customerTable">
            <li class="mui-table-view-cell"><span style="float:left">用户姓名</span><span style="float:right"
                                                                                      id="customerName">${info.userName}</span>
            </li>
            <li class="mui-table-view-cell"><span style="float:left">详细地址</span><span style="float:right"
                                                                                      id="address">${info.address}</span>
            </li>
            <li class="mui-table-view-cell"><span style="float:left">电话号码</span><span style="float:right"
                                                                                      id="phoneNumber">${info.tel}</span>
            </li>
        </ul>
        <br>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a id="tabCus" style="text-align: center;cursor: pointer;" class="mui-tab-item" href="#product-info">
                    <b>设备详情</b>
                </a>
            </li>
        </ul>
    </div>
    <div id="product-info" class="mui-control-content">
        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="productTable">
            <li class="mui-table-view-cell">
                <a href="${pageContext.request.contextPath}/distributor/custom/customDevInfo?devSn=${info.devSn}">
                    <div class="mui-table">
                        <div class="mui-table-cell mui-col-xs-10">
                            <img class="mui-media-object mui-pull-left"
                                 src="${pageContext.request.contextPath}/static/img/11.png">
                            <h4 style="vertical-align: middle;line-height: 42px;">基本信息列表</h4>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a href="${pageContext.request.contextPath}/distributor/custom/customFilterInfo?devSn=${info.devSn}">
                    <div class="mui-table">
                        <div class="mui-table-cell mui-col-xs-10">
                            <img class="mui-media-object mui-pull-left"
                                 src="${pageContext.request.contextPath}/static/img/12.png">
                            <h4 style="vertical-align: middle;line-height: 42px;">滤芯状态列表</h4>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell" index="0">
                <a href=" ${pageContext.request.contextPath}/distributor/custom/customOrderInfo?userId=${info.id}">
                    <div class="mui-table">
                        <div class="mui-table-cell mui-col-xs-10">
                            <img class="mui-media-object mui-pull-left"
                                 src="${pageContext.request.contextPath}/static/img/13.png">
                            <h4 style="vertical-align: middle;line-height: 42px;">充值订单详情</h4>
                        </div>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a href="${pageContext.request.contextPath}/distributor/custom/customRepairInfo?userId=${info.id}">
                    <div class="mui-table" url="repair-info.html">
                        <div class="mui-table-cell mui-col-xs-10">
                            <img class="mui-media-object mui-pull-left"
                                 src="${pageContext.request.contextPath}/static/img/14.png">
                            <h4 style="vertical-align: middle;line-height: 42px;">设备报修列表</h4>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>


<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-loop"></span>
        <span class="mui-tab-label">开机</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-close"></span>
        <span class="mui-tab-label">关机</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-arrowthindown"></span>
        <span class="mui-tab-label">强冲</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-plus"></span>
        <span class="mui-tab-label">充值1升</span>
    </a>
</nav>
</body>
<jsp:include page="../footer.jsp"></jsp:include>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
</script>
</html>